<script setup lang='ts'>
// isRef：用来判断当前数据是否具备响应式
// unref: 传递一个响应式数据，会返回一个响应式数据的值，该值是不具备响应式的
// toRefs: 让解构出来的数据具备响应式
// toRef: 解构的内容不存在的时候，可以自动生成一个具备响应式的该数据
import { ref, isRef, unref, reactive, toRefs,toRef, toValue } from "vue";

const count = ref(100)
const num = 150

// console.log(isRef(count),isRef(num));


// console.log(count);
// // 通过 unref 之后，原来的 count 是不变的，相当于将原来 count 的值
// // 取出来赋值给 count2
// const count2 = unref(count)
// console.log(count,count2);


const state = reactive({
    name: '张三',
    age: 18
})

const {name} = toRefs(state)    

let sex = toRef(state)
sex.value = '男'


console.log(count,toValue(count));


</script>
<template>
    <div >
    <button @click='count++'>加 1</button>
        <h1> {{count}} </h1>

        <button @click='name="王五"'>修改 name</button>
        <button @click='sex="女"'>修改 sex</button>
        <h1> {{state}} {{name}} ---- {{sex}} </h1>  
    </div>
</template>
<style>
    
</style>